<template>
<Page class="basic company">
    <template #header>
        <!-- 物业人员登录 -->
        <EdSelect :selectParams="orderParams" v-model="params.orderType"></EdSelect>
        <!-- <EdSelect v-if="$store.getters.type == 1" :selectParams="orderParams" v-model="params.Order"></EdSelect> -->
        <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
        <el-button v-if="orderParams.options.length > 1" class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
    </template>
    <!-- <PageCard> -->
        <div>
            <el-row class="margin0" style="padding: 24px 0 10px 24px">
                <el-col :span="6" style="padding: 0 24px 0 0">
                    <div class="mainBackgroundColor border-radius8 overflowHidden">
                        <div style="padding: 28px 0" >
                            <div class=" flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize18">订单总数量(笔)&nbsp;</p>
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.totalOrderCount ? total.totalOrderCount : 0}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" style="padding: 0 24px 0 0">
                    <div class="mainBackgroundColor border-radius8 ">
                        <div style="padding: 28px 0">
                            <div class=" flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block ">
                                    <p class="margin0 fontSize18">订单总金额(元)&nbsp;</p>
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.totalOrderMoney ? total.totalOrderMoney : 0}} <span class="fontSize12"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" style="padding: 0 24px 0 0">
                    <div class="mainBackgroundColor border-radius8">
                        <div style="padding: 28px 0">
                            <div class=" flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize18">总成交用户数(人)&nbsp;</p>
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.successUserCount ? total.successUserCount : 0}} <span class="fontSize12"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" style="padding: 0 24px 0 0">
                    <div class="mainBackgroundColor border-radius8 overflowHidden">
                        <div style="padding: 28px 0">
                            <div class=" flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize18">核销总订单(笔)&nbsp;</p>
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.verifCount ? total.verifCount : 0}} <span class="fontSize12"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        
    <!-- </PageCard> -->
    <PageCard>
        <!-- </el-row> -->
        <div style="width: 100%,height:100%;border-radius: 8px" class="mainBackgroundColor">
            <div class="mainBackgroundColor">
                <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">
                    销售统计
                    <el-date-picker
                            v-model="time"
                            type="daterange"
                            size="mini"
                            class="floatRight"
                            @change="changeTime"
                            :picker-options="pickerOptions"
                            format="yyyy-MM-dd"
                            style="margin-top: -10px"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                <div class="padding24 width-100" id="chart1" style="width:100%;height: 500px"></div>
            </div>
            <!-- <div style="padding: 26px 30px 40px 30px">
                <div id="container" style="width:100%;height: 500px"></div>
            </div> -->
        </div>
    </PageCard>

       
    </Page>
</template>

<script>
    import * as echarts from 'echarts';
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import {orderAct,orderList} from "./api.js";
    export default {
        name: "index",
        components:{Page,PageCard,EdSelect},
        data(){
            return{
                params: {
                    orderType: "",
                },
                // 物业人员登录下拉框数据
                orderParams:{
                    options: [],
                    placeholder:"请选择订单类型"
                },
                total:{},
                time:null,
                pickerOptions:{},
                charts_data:{
                    orderDates:[],   //X轴，日期
                    orderNumtList:[],     //Y轴 订单总数量
                    orderMoneyList:[],  //Y轴 订单总金额
                },
                charts_options: {},
                myCharts:''
               
            }
        },
        computed:{
            
        },
        activated() {
            switch (this.$store.getters.type) {
                case 3:
                case 2:
                    this.orderParams.options = [
                        {value: '',label: '全部订单'},
                        {value: '1',label: '产品库订单'},
                        {value: '2',label: '商家订单'}
                    ]
                    break;
                case 5:
                    this.orderParams.options = [
                        {value: '2',label: '商家订单'}
                    ]
                    break;
                case 1:
                     this.orderParams.options = [
                        {value: '1',label: '产品库订单'}
                    ]
                    break;
                default:
                    break;
            }
            this.params.orderType = this.orderParams.options[0]?.value
            this.pointAct()
            this.showInitChart1();
            this. pickerOptions = {
                onPick: ({ maxDate, minDate }) => {
                    this.cuttentTime = minDate.getTime();
                    if (maxDate) {
                        this.cuttentTime = "";
                    }
                },
                    disabledDate: (time) => {
                    if (time.getTime() > Date.now()) {
                        return true;
                    }
                    }
                //     if (this.cuttentTime != "") {
                //         const one = 30 * 24 * 3600 * 1000;
                //         const minTime = this.cuttentTime - one;
                //         const maxTime = this.cuttentTime + one;
                //         return time.getTime() < minTime || time.getTime() > maxTime;   //选择日期范围为一个月
                //     }
                // },
            }
            // getDictByCode("order_type").then(response => {
            //     if(response.success) {
            //         this.orderParams.options=response.data.items
            //     }
            // })
        },
        methods:{
            pointAct() {
                orderAct({orderType: this.params.orderType}).then(response => {
                    if(response.success){
                        this.total = response.data;
                    }
                })
            },
            search(){
                this.pointAct()
                this.showInitChart1();
            },
            reset(){
                this.params = {
                    orderType: this.orderParams.options[0].value
                };

                // this.$nextTick(()=>{
                //     this.$refs.table.load(1,10)
                //     })
            },
            changeTime() {
                this.showInitChart1();
            },
            showInitChart1() {
                const timerange = this.time ?? ['','']
                orderList({startTime:timerange[0],endTime:timerange[1],orderType:this.params.orderType}).then(res=>{
                    if(res.success==true){
                        this.charts_data = {
                            orderDates:res.data.dates || [],
                            orderNumtList:res.data.orderCount || [],
                            orderMoneyList:res.data.orderMoney || [],
                        }
                    }
                    setTimeout(()=>{
                        this.initChart1(res);
                    },100)
                    
                }).catch(()=>{
                });
                this.initChart1([]);
            },
            initChart1(data){
                let dom = document.getElementById("chart1");
                this.myCharts = echarts.init(dom);
                this.setLineChart(this.myCharts,data);
            },
            setLineChart(myCharts,data){
            myCharts.clear();
            this.charts_options = {
                tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                            type: 'shadow',
                            
                            },
                            borderWidth: 4
                    },
                    legend: {
                        data: ['订单总数量', '订单总金额'],
                        textStyle: {
                        color: '#606266',
                        fontWeight: '400'
                    }
                    },
                    grid: {
                        show:false,
                        left: '5%',
                        top: '20%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        data:this.charts_data['orderDates'],
                        // data: ['5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21','5-22','5-23','5-24','5-25','5-26','5-27','5-28'],
                        type: 'category',
                        boundaryGap: true,
                        textStyle: {
                            color: '#6E6E6D',
                            fontWeight: 400,
                            fontFamily: 'Noto Sans SC'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#414448'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#F2F3F5'
                            }
                        },
                            axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#414448',
                            }
                        },
                    },
                    series: [
                        {
                        // data: [150, 132, 1300, 134, 90, 230, 500],
                        data: this.charts_data['orderNumtList'],
                        name: '订单总数量',
                        type: 'line',
                        // stack: 'Total',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#6F8EC6',
                        },
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(153, 189, 254, 0.12)'},
                                    {offset: 1, color: 'rgba(153, 189, 254, 0.0001)'},
                                ]
                            }
                        },
                        smooth: true,
                        },
                        {
                        // data: [220, 182, 191, 1400, 290, 330, 310,600,700,800,900,1000,1200,700],
                        data: this.charts_data['orderMoneyList'],
                        name: '订单总金额',
                        type: 'line',
                        // stack: 'Total',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#DDB15C',
                        },
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(255, 211, 100, 0.12)'},
                                    {offset: 1, color: 'rgba(255, 235, 52, 0.0001)'},
                                ]
                            }
                        },
                        smooth: true,
                        },
                    ]
            }
            myCharts.setOption(this.charts_options);
            this.myCharts = myCharts;
          }
          
        }
    }
</script>

<style lang="scss">

</style>